
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>home page</title>

</head>

<body>
    <h1>home page</h1>    
    <p>home page</p>
    <a href="/login.html">点我进入登陆页面</a><br>
</body>
</html>



<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .error {
            color: red;
            font-size: 0.9em;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>登录</h2>
        <form id="loginForm" method="GET" action="success.html">
            <label for="username">账号:</label>
            <input type="text" id="username" name="username" required>

            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>

            <input type="submit" value="登录">
            <div id="error" class="error"></div>
        </form>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorDiv = document.getElementById('error');

            // 清除之前的错误信息
            errorDiv.textContent = '';

            // 进行简单的表单验证
            if (username === '' || password === '') {
                errorDiv.textContent = '请输入账号和密码';
                return;
            }

            // 构建查询字符串
            const formData = new FormData();
            formData.append('username', username);
            formData.append('password', password);

            // 使用POST方法发送请求
            fetch('success.html', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                    throw new Error('登录失败');
                }
            })
            .then(html => {
                // 将成功页面的HTML内容加载到当前窗口
                document.open();
                document.write(html);
                document.close();
            })
            .catch(error => {
                errorDiv.textContent = '登录失败，请检查账号和密码';
                console.error(error);
            });
        });
    </script>
</body>
</html>





<!-- GET 版本 -->

<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .error {
            color: red;
            font-size: 0.9em;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>登录</h2>
        <form id="loginForm" method="POST" action="/api/login">
            <label for="username">账号:</label>
            <input type="text" id="username" name="username" required>

            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>

            <input type="submit" value="登录">
            <div id="error" class="error"></div>
        </form>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorDiv = document.getElementById('error');

            // 清除之前的错误信息
            errorDiv.textContent = '';

            // 进行简单的表单验证
            if (username === '' || password === '') {
                errorDiv.textContent = '请输入账号和密码';
                return;
            }

            // 构建查询字符串
            const queryString = `?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;

            // 模拟登录成功，跳转到成功页面并传递查询字符串
            window.location.href = 'success.html' + queryString;
        });
    </script>
</body>
</html> --> -->